<template>
    <div id="app">
        <div>插值表达式取值 count: {{ $store.state.count }}</div>
        <div>计算属性取值 count: {{ count }}</div>
        <div>辅助函数取值 count: {{ count }}</div>
        <div>filterList: {{ $store.getters.filterList }}</div>
        <div>计算属性取值filterList: {{ filterList }}</div>
        <div>辅助函数取值 filterList: {{ filterList }}</div>
        <!-- $store.state.模块名.变量 模块名和变量之间不需要再写state -->
        <p>模块化取值 name: {{ $store.state.user.name }}</p>
        <p>模块化取值 name: {{ $store.state.test.name }}</p>
        <p>name: {{ name }}</p>
        <!-- <button @click="setName">修改user模块的name</button> -->
        <button @click="setActionName">修改user模块的name</button>
        <!-- <p>辅助函数取模块 name: {{ name }}</p> -->
        <!--使用辅助函数mapMutations 不传值默认传的就是事件对象，如果传值了就会改成你传入的值 -->
        <button @click="addCount(1)">count + 1</button>
        <button @click="addCount(100)">count + 100</button>
        <br />
        <br />
        <button @click="addAsyncCount(1000)">延迟调用++</button>
        <!-- <ul>
            <li v-for="item in $store.state.channels" :key="item.id">
                {{ item.name }}
            </li>
        </ul> -->
    </div>
</template>

<script>
// mapMutations
// mapActions
import { mapState, mapMutations, mapActions, mapGetters } from "vuex"; // mapState是一个函数

export default {
    name: "App",
    computed: {
        // count() {
        //     return this.$store.state.count; // store count改了组件count也会更改
        // },
        ...mapState(["count"]),
        // ...mapState("user", ["name"]),
        // filterList() {
        //     return this.$store.getters.filterList;
        // },
        ...mapGetters(["filterList"]),
        ...mapState("user", ["name"]),
    },
    created() {
        // console.log(this.$store);
        // console.log(mapState(["count"]));
        this.$store.dispatch("getChannels");
    },
    methods: {
        // 2. mutation触发-辅助函数
        ...mapMutations(["addCount"]),
        // ...mapMutations(["user/setName"]),
        // 第一参数是模块名，第二参数是mutation方法名

        ...mapMutations("user", ["setName"]),
        ...mapActions("user", ["setActionName"]),
        // addCount() {
        //     // 1. mutation触发-原始形式
        // this.$store.commit("addCount"); // addCount对应的是mutation的函数名
        // },
        // addAsyncCount() {
        //     // 1. actions触发 -> 原始形式 dispatch
        //     this.$store.dispatch("addAsyncCount", 100);
        // },
        // 2. actions触发 -> 辅助函数
        ...mapActions(["addAsyncCount"]),
        // setName() {
        // 模块调用mutation要加上 模块名/mutation方法名
        // this.$store.commit("user/setName");
        //   模块调用action要加上 模块名/action方法名
        // this.$store.dispatch("user/setActionName");
        // this["user/setName"]();
        // },
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
